<template>
    <!-- 分销商等级管理 -->
    <div>
        <div class="head">
            <span>分销商等级 </span>
        </div>
        <router-link to="/AddClassify">
            <button class="button">添加分销商等级</button>
        </router-link>
        
        <!-- 表格 -->
        <div class="hh">
            <el-table :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" border style="width: 100%">
                <el-table-column prop="weight" label="等级权重" width="180" align="center"/>
                <el-table-column prop="name" label="等级名称" align="center" />
                <el-table-column prop="upgradation" label="升级方式" align="center" />
                <el-table-column prop="fen" label="分销商数" align="center" />
                <el-table-column prop="one" label="一级佣金比例" align="center" />
                <el-table-column prop="two" label="二级佣金比例" align="center" />
                <el-table-column prop="three" label="三级佣金比例" align="center" />
                <el-table-column fixed="right" label="operate" width="150" align="center">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click.prevent="secure(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <el-pagination :disabled="false" :background="true" layout="prev, pager, next, jumper"
                :current-page.sync="currentPage" :page-size="pagesize" :total="Total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
        <!-- 分页 -->
       
    </div>
</template>

<script setup lang="ts">
import { ref, onBeforeMount} from 'vue';
const pagesize = ref(5) //每页显示多少条
const currentPage = ref(1) //当前是第几页
const Total = ref() //总条数
// 表格

const tableData = [
    {
        weight: "一级",//等级权重
        name: "青铜仔",//等级名称
        upgradation: '满足条件',//升级方式
        fen: '124',//分销商数
        one: "5%",//一级佣金比例
        two: '8%',//二级佣金比例
        three: '10%'//三级佣金比例
    },
    {
        weight: "二级",//等级权重
        name: "青铜仔",//等级名称
        upgradation: '满足条件',//升级方式
        fen: '124',//分销商数
        one: "5%",//一级佣金比例
        two: '8%',//二级佣金比例
        three: '10%'//三级佣金比例
    },
    {
        weight: "三级",//等级权重
        name: "白银仔",//等级名称
        upgradation: '满足条件',//升级方式
        fen: '124',//分销商数
        one: "5%",//一级佣金比例
        two: '8%',//二级佣金比例
        three: '10%'//三级佣金比例
    }
]
// 编辑按钮
const secure = ((obj: any) => {
    console.log(obj);

})
// 分页
const handleSizeChange = (val: number) => {
    // console.log(`${val} items per page`)
    pagesize.value = val
    // console.log(pagesize.value=val);

}
const handleCurrentChange = (val: number) => {
    // console.log(`current page: ${val}`)
    // console.log(val);
    currentPage.value = val


}
onBeforeMount(() => {
    // Total.value=Number(Math.ceil(tableData.length/pagesize.value)+'0') //初始化更新分页总数
    Total.value = Number(tableData.length) //初始化更新分页总数

})
</script>

<style scoped lang="less">
.head{
    width: 100%;
    height: 40px;
    background-color: white;
    span{
        margin-left: 10px;
        line-height: 40px;
        font-size: 14px;
    }
}
.button{
    width: 120px;
    height:35px;
    background-color: #ed742f;
    border-radius: 5px;
    border: 0;
    color: white;
    margin:20px 0 20px 0;
    cursor: pointer;
}
// 表格
.hh{
    width: 100%;
    height: 600px;
    background-color: white;
    box-sizing: border-box;
    padding: 20px;
    margin-bottom: 10px;
}
// 分页
.el-pagination{
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
</style>